<template>
  <div class="div_right_add_friend_result_friend">
    <!--    这里其实也应该是个循环.-->
    <CScrollbar class="div_crollbar" width="1040px"
                height="560px">
      <!--    添加滚动条 for 循环先不改..-->
      <div v-if="this.$store.state.addfriend.isShow">
        <div v-for="num in count" :key="num" class="div_right_add_friend_result_friend_for">

          <div class="div_right_add_friend_result_card " style="vertical-align: top">
            <div class="div_display_inline_block" style="vertical-align: top">
              <img class="img_right_add_friend" :src="this.$store.state.addfriend.result.img_url" alt="">
              <!--            <img class="img_right_add_friend" :src="require('../../../assets/middle_session_photo_42.jpg')" alt="">-->
            </div>
            <div class="div_display_inline_block" style="vertical-align: top">
              <div class="div_right_add_friend_result_friend_name">
                {{ this.$store.state.addfriend.result.username }}
              </div>
              <div class="div_right_add_friend_result_friend_city">
                河南
              </div>
              <div class="div_right_add_friend_result_friend_button">
                <el-button @click="sendAddFriend(this.$store.state.addfriend.result.id)" size="small" type="primary">
                  加好友
                </el-button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </CScrollbar>
  </div>

</template>

<script>

import {CScrollbar} from "c-scrollbar"
import {request} from '../../../util/httprequest'
import {ElMessageBox} from 'element-plus'
import {Notification} from "../../../util/notification"

export default {
  name: "right_add_friend_result_friend",
  components: {CScrollbar},
  data() {
    return {
      count: 1,
      friend: this.$store.state.addfriend.result,
      isShow: this.$store.state.addfriend.isShow,
      data: {
        uid: "",
        token: "",
      }
    }
  },
  methods: {

    // 添加好友.
    sendAddFriend(uid) {
      // token 是我自己.
      this.data.uid = uid
      this.data.token = this.$store.state.userInfo.token
      request("post", "/friend/add", this.data).then((response) => {
        console.log("sendAddFriend response")

        console.log(response)
        if (response.data.code === 0) {
          // 成功.
          // 向那个数组中添加当前好友关系.末尾.
          // response.data.data 才是我们自己的数据.
          this.$store.commit('setAddFriend', response.data.data)
          // 给个提示.
          ElMessageBox.alert("添加好友成功,快去聊天吧~","提示信息",{
            confirmButtonText: "确定",
          })
          // 给出提示.
          Notification("提示信息", response.data.msg, "success")
        } else if (response.data.code === 1008) {
          // 已经是好友了.
          console.log("已经是好友了. ")
          ElMessageBox.alert("已经是您的好友了,快去聊天吧~","提示信息",{
            confirmButtonText: "确定",
          })
        } else {
          // 请求失败.
          ElMessageBox.alert("添加好友失败。","提示信息",{
            confirmButtonText: "确定",
          })
        }
      })
    },
  },
}
</script>

<style scoped>

.div_right_add_friend_result_friend {
  background-color: #f7f7f7;
}

.div_right_add_friend_result_friend_for {
  display: inline-block;
  margin-left: 34px;
}

.div_right_add_friend_result_card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 250px;
  height: 150px;
  margin-left: 35px;
  margin-top: 30px;
}

.div_display_inline_block {
  display: inline-block;
}

.img_right_add_friend {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  margin-top: 43px;
  vertical-align: top;
  position: relative;
  margin-left: 15px;
}


.div_right_add_friend_result_friend_name {
  vertical-align: top;
  position: relative;
  margin-top: 35px;
  margin-left: 10px;
  color: #4c6ef5;
}

.div_right_add_friend_result_friend_city {
  vertical-align: top;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
}

.div_right_add_friend_result_friend_button {
  vertical-align: top;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
}
</style>